<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <script src="/kissy/build/seed.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <script src="/kissy/src/log.js"></script>
</head>
<body>
<style>
    div {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
</style>
<div id="t1">
    monitor touch events
</div>
<div id="t2">
    touchstart preventDefault
</div>
<div style="height: 900px;"></div>
<script type="text/javascript">
    var t1 = document.getElementById('t1');
    var t2 = document.getElementById('t2');
    function printTouches(touches) {
        console.log(touches.length);
        for (var i = 0; i < touches.length; i++) {
            console.log('touches' + i);
            console.log("target: " + touches[i].target.id);
            console.log("pageX: " + touches[i].pageX);
            console.log("pageY: " + touches[i].pageY);
        }
    }

    function monitorTouch(t) {

        return function (e) {
            log(e.type + ' : ' + e.touches.length);
            console.log(t.id + ' monitor ' + e.type + ' ........');
            console.log("e.target: " + e.target.id);
            console.log("e.pageX: " + e.pageX);
            console.log("e.pageY: " + e.pageY);
            console.log('touches:');
            printTouches(e.touches);

            console.log('targetTouches:');
            printTouches(e.targetTouches);

            console.log('changedTouches:');
            printTouches(e.changedTouches);
        };
    }
    function monitorT(t) {
        var monitorTouch2 = monitorTouch(t);
        t.addEventListener('touchstart', monitorTouch2, false);
        t.addEventListener('touchmove', monitorTouch2, false);
        t.addEventListener('touchend', monitorTouch2, false);
        t.addEventListener('touchcancel', monitorTouch2, false);
    }

    monitorT(t1);
    t2.addEventListener('touchstart', function (e) {
        e.preventDefault();
    }, false);
    monitorT(document.body);
</script>
</body>
</html>